<template>
	<view class="chat-detail-container">
		<view class="header">
			<text class="title">{{ message.title }}</text>
			<uni-icons type="back" size="20" color="#333" @click="goBack"></uni-icons>
		</view>

		<view class="message-content">
			<text class="message-desc">{{ message.content }}</text>
			<text class="message-time">{{ formatTime(message.time) }}</text>
		</view>

		<view class="chat-container">
			<view class="chat-messages">
				<view v-for="(msg, index) in chatMessages" :key="index" class="chat-message" :class="{ 'my-message': msg.isMine }">
					<text>{{ msg.text }}</text>
				</view>
			</view>

			<view class="input-area">
				<input v-model="newMessage" placeholder="输入消息..." @keyup.enter="sendMessage" />
				<button @click="sendMessage">发送</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			message: {}, // 当前消息详情
			chatMessages: [], // 聊天记录
			newMessage: '' // 新消息输入
		}
	},
	onLoad(options) {
		// 模拟获取消息详情
		this.message = {
			title: options.title || '消息标题',
			content: options.content || '消息内容',
			time: options.time || Date.now()
		};
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		formatTime(timestamp) {
			const date = new Date(timestamp);
			return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
		},
		sendMessage() {
			if (this.newMessage.trim() === '') return;

			// 添加新消息到聊天记录
			this.chatMessages.push({
				text: this.newMessage,
				isMine: true // 标记为自己的消息
			});
			this.newMessage = ''; // 清空输入框

			// 模拟对方回复
			setTimeout(() => {
				this.chatMessages.push({
					text: '对方的回复内容',
					isMine: false // 标记为对方的消息
				});
			}, 1000);
		}
	}
}
</script>

<style lang="scss">
.chat-detail-container {
	padding: 20rpx;
	background-color: #f8f8f8;
	min-height: 100vh;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
		}
	}

	.message-content {
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 20rpx;

		.message-desc {
			font-size: 28rpx;
			color: #666;
		}

		.message-time {
			font-size: 20rpx;
			color: #999;
			margin-top: 5rpx;
		}
	}

	.chat-container {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		flex: 1;
		display: flex;
		flex-direction: column;

		.chat-messages {
			flex: 1;
			overflow-y: auto;
			margin-bottom: 10rpx;

			.chat-message {
				padding: 10rpx;
				border-radius: 10rpx;
				margin-bottom: 10rpx;

				&.my-message {
					background-color: #007AFF;
					color: #fff;
					align-self: flex-end;
				}
			}
		}

		.input-area {
			display: flex;
			align-items: center;

			input {
				flex: 1;
				padding: 10rpx;
				border: 1px solid #ccc;
				border-radius: 5rpx;
				margin-right: 10rpx;
			}

			button {
				background-color: #007AFF;
				color: #fff;
				border: none;
				border-radius: 5rpx;
				padding: 10rpx 20rpx;
			}
		}
	}
}
</style> 